<template>
	<Layout :class="'bg-white p-2'">
		<Row :class="'m-1'">
			<Col span="2">
			<Button class="m-2" type="error" @click="newHouse()">新增</Button>
			</Col>
			<!-- <Col span="4">
			<Input :class="'w-75 m-2'" v-model="searchProvience" placeholder="请输入省" />
			</Col>
			<Col span="4">
			<Input :class="'w-75 m-2'" v-model="searchCity" placeholder="请输入市" />
			</Col>
			<Col span="4">
			<Input :class="'w-75 m-2'" v-model="searchRegin" placeholder="请输入区" />
			</Col> -->
		</Row>
		<Row :class="'m-3'">
			<label>面积搜索：</label>
			<el-select v-model="houseAreaId" clearable placeholder="面积搜索" size="small"
				style="width: 200px;margin-right: 20px;" @change="search(1)">
				<el-option v-for="item in areaConditions" :key="item.houseAreaId" :label="item.label"
					:value="item.houseAreaId">
				</el-option>
			</el-select>
			<label>价格搜索：</label>
			<el-select v-model="sellPriceId" clearable placeholder="价格搜索" size="small"
				style="width: 200px;margin-right: 20px;" @change="search(1)">
				<el-option v-for="item in sellPrices" :key="item.sellPriceId" :label="item.label"
					:value="item.sellPriceId">
				</el-option>
			</el-select>
			<Input :class="'w-25 m-2'" v-model="searchDes" placeholder="请输入检索关键字" />
			<Button :class="'w-15 m-2'" type="primary" shape="circle" @click="search(1)" icon="ios-search">查询</Button>
		</Row>
		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="provienceId">
				  <Row>
				    <Col>
				      <span @click="showpro(row.provienceId)">{{pro[index]}}</span>
				      
				    </Col>
				  </Row>
				</template>
				<template slot-scope="{ row, index }" slot="cityId">
				  <Row>
				    <Col>
				      <span @click="showcit(row.cityId)">{{cit[index]}}</span>
				      
				    </Col>
				  </Row>
				</template>
				<template slot-scope="{ row, index }" slot="reignId">
				  <Row>
				    <Col>
				      <span @click="showreg(row.reignId)">{{reg[index]}}</span>
				      
				    </Col>
				  </Row>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.sellId)">详细</Button>
					<Button type="error" size="small" @click="remove(row.sellId)">删除</Button>
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
				pro:[],
				cit:[],
				reg:[],
				clientId:'',
				searchDes: "",
				sellId: "",
				houseAreaId: null,
				sellPriceId: null,
				tableInfo: {
					currentPage: 1,
					total: 0,
					propertType: 0,
					columnInfo: [{
							title: "卖房编号",
							key: "sellId",
							
						},
						// {
						// 	title: "描述",
						// 	key: "des",
						// 	width: 300
						// },
						{
							title: "省",
							slot: "provienceId",
							
						},
						{
							title: "市",
							slot: "cityId",
							
						},
						{
							title: "区",
							slot: "reignId",
							
						},
                        {
                        	title: "小区",
                        	key: "xiaoqu",
                        	
                        },
						{
							title: "片区",
							key: "pianqu",
							
						},
						// {
						// 	title: "详细地址",
						// 	key: "detailLocation",
						// 	width: 250
						// },
						{
							title: "面积",
							key: "area",
							
						},
						{
							title: "总价",
							key: "totalPrice",
							
						},
						{
							title: "产权类型",
							key: "typeName",
							
						},
						{
							title: "操作",
							slot: 'action',
							width: 163
						}
					],

					data: []
				},
				areaConditions: [
					{
						houseAreaId: 1,
						label: '100-200'
					},
					{
						houseAreaId: 2,
						label: '201-300'
					},
					{
						houseAreaId: 3,
						label: '301-400'
					},

				],
				sellPrices: [{
						sellPriceId: 1,
						label: '50-80'
					},
					{
						sellPriceId: 2,
						label: '81-110'
					},
					{
						sellPriceId: 3,
						label: '111-130'
					},
					{
						sellPriceId: 4,
						label: '131-150'
					},
				]
			}
		},
		methods: {
		 showpro:function(provienceId){
				this.http.get({
					url: "/sys-region/name",
					param: {
						srId:provienceId
					}
				}).then(data => {
					console.log(data)
					this.$data.pro.push(data)
					// console.log(this.pro)
				})
			},
			showcit:function(cityId){
				this.http.get({
					url: "/sys-region/name",
					param: {
						srId:cityId
					}
				}).then(data => {
					// console.log(data)
					this.$data.cit.push(data)
					// console.log(this.cit)
				})
			},
			showreg:function(reignId){
				this.http.get({
					url: "/sys-region/name",
					param: {
						srId:reignId
					}
				}).then(data => {
					// console.log(data)
					this.$data.reg.push(data)
					// console.log(this.cit)
				})
			},
			init: function() {
				var client = this.local.session.getItem("CURRENT");
				this.search(1);
			},
			newHouse: function() {
				this.$router.push({
					name: "houseSell_new"
				});
			},
			show: function(sellId) {
				this.$router.push({
					name: "houseSell_detail",
					params: {
						sellId
					}
				});
			},
			remove: function(sellId) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除用户，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/house-sell/info",
							param: {
								sellId
							}
						}).then(data => {
							this.search(this.$data.tableInfo.currentPage);
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			search: function(currentPage) {	
				this.pro = []
				this.cit = []
				this.reg = []
				this.http.get({					
					url: "http://localhost:443/lanniao-user/house-sell-client-vo/page",
					param: {
						currentPage: currentPage ,
						des: this.$data.searchDes,
						houseAreaId: this.$data.houseAreaId,
						sellPriceId: this.$data.sellPriceId,
						clientId: this.$data.clientId
					}
				}).then(data => {
					for(var i = 0;i<data.records.length;i++){
						
						this.showpro(data.records[i].provienceId)
						this.showcit(data.records[i].cityId)
						this.showreg(data.records[i].reignId)
					}
					// for(var j = 0;j<data.records.length;j++){
						
					// 	this.showcit(data.records[j].cityId)
					// }
					this.$data.tableInfo.data = data.records;
					this.$data.tableInfo.total = data.total;
					this.$data.tableInfo.pageSize = data.size;
				});
			},
			pageSearch: function(changedPage) {
				this.$data.tableInfo.currentPage = changedPage;
				this.search(changedPage);
			}
		},
		created: function() {			
			this.init();
		}
	}
</script>

<style>

</style>
